<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
<<<<<<< HEAD
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        v-model="html"
        style="height: 150px; overflow-y: hidden"
        :default-config="editorConfig"
        @onCreated="onCreated"
      />
=======
      <quill-editor
        class="editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
>>>>>>> 6b23a83f0c4b3d10c6c461dc0b6a369745e8d921
    </div>
  </div>
</template>

<script>
<<<<<<< HEAD
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
  components: { Editor, Toolbar },
=======
// import Vue from 'vue'
// import { Editor, Toolbar } from '@wangeditor/editor-for-v/ue'
import { quillEditor } from 'vue-quill-editor'
import hljs from 'highlight.js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote', 'code-block'],
  ['image', 'link']
]
export default {
  name: 'Editor',
  components: {
    quillEditor
  },
>>>>>>> 6b23a83f0c4b3d10c6c461dc0b6a369745e8d921
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data () {
    return {
<<<<<<< HEAD
=======
      uniqueId: 'uniqueId',
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions,
          syntax: {
            highlight: (text) => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        theme: 'snow',
        placeholder: '请输入正文'
      },
>>>>>>> 6b23a83f0c4b3d10c6c461dc0b6a369745e8d921
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    value () {
      this.html = this.value
      this.$emit('input', this.html)
    },
    html () {
      if (this.html === '<p><br></p>') return
      this.$emit('input', this.html)
    }
  },
  created () {
    console.log('内容', this.content)
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
<<<<<<< HEAD
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  }
})
=======
  }

}
>>>>>>> 6b23a83f0c4b3d10c6c461dc0b6a369745e8d921
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
